<seed-content class="gray-background">
  <seed-toolbar-header>
  <seed-toolbar-title>{{dataStore.topicTitle}}</seed-toolbar-title>
  <seed-toolbar-menu></seed-toolbar-menu>
</seed-toolbar-header>


  <seed-cycle [slides]="dataStore.banner" (clicked)="goToBannerTarget($event)"></seed-cycle>

  <!--自定义布局商品或图链-->
  <div *ngIf="goodsModules.length>0">
    <div class="goods-module custom-module" [class.no-title]="module.displayTitle===0"
         [class.media-query]="stateStore.mediaQuery" *ngFor="let module of goodsModules">
      <div class="module-title" *ngIf="module.displayTitle===1">
        <h1>{{module.columnTitle}}</h1>
      </div>
      <div class="goods-list seed-flexbox seed-flexbox-content-between">
        <div class="goods-card" *ngFor="let goods of module.contentList"
             [class.full]="goods.verticalDisplay===0"
             [class.half]="goods.verticalDisplay===1"
             (click)="handleDetail(goods)"
        >
          <div class="container "
               [class.goods-container]="goods.contentType===1"
               [class.image-container]="goods.contentType===0"
          >
            <!--正方形商品图片-->
            <div class="cover"
                 *ngIf="goods.contentType===1&&goods.verticalDisplay===1||goods.contentType===1&&goods.verticalDisplay===0"
                 [style.height]="stateStore.halfGoodsWidth+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'middle'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <!--竖状图片链接图片-->
            <div class="cover" *ngIf="goods.contentType===0&&goods.verticalDisplay===1">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'vertical'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>

            <!--横状图片链接图片-->
            <div class="cover" *ngIf="goods.contentType===0&&goods.verticalDisplay===0"
                 [style.height]="stateStore.fullGoodsWidth/1.864+'px'">
              <seed-img [background]="goods.iconUrl" [defaultImg]="'long'" [lazyLoadImg]="goods.iconUrl"></seed-img>
            </div>
            <div class="content" *ngIf="goods.display===1">
              <div class="title-box">
                <h2 class="title" *ngIf="goods.layout===2||goods.layout===3">{{goods.displayText}}</h2>
              </div>
              <p *ngIf="goods.layout===3" class="price-box">
                <i class="symbol" *ngIf="goods.price>0">￥</i>
                <span class="price" [class.free]="goods.price===0">{{goods.price|money}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--服务优选-->

  <seed-infinite-scroll (infiniteScroll)="getRecommendGoods()">
    <div class="goods-module recommend-module" *ngIf="recommendGoods.length>0">
      <div class="module-title">
        <h1>服务优选</h1>
      </div>
      <div class="goods-list seed-flexbox seed-flexbox-content-between">
        <div class="goods-card half" *ngFor="let goods of recommendGoods;let i=index;"
             (click)="goToGoodsDetail(goods.goodsCode)"
        >
          <div class="goods-container" [class.firstGoods]="i===0">
            <div class="cover" [style.height]="stateStore.halfGoodsWidth+'px'">
              <seed-img [background]="goods.goodsThumbUrl" [defaultImg]="'middle'"
                        [lazyLoadImg]="goods.goodsMiddleUrl"></seed-img>
            </div>
            <div class="content">
              <div class="title-box">
                <h2 class="title">{{goods.goodsFullName}}</h2>
              </div>
              <p class="price-box">
                <i class="symbol" *ngIf="goods.goodsLowestPrice>0">￥</i> <span class="price"
                [class.free]="goods.goodsLowestPrice===0">{{goods.goodsLowestPrice|money}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <seed-infinite-scroll-content *ngIf="recommendGoods.length>0"></seed-infinite-scroll-content>
  </seed-infinite-scroll>
</seed-content>
